<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/common :: head}"></head>
<body>
  <div class="portletBody container-fluid">
    <div th:replace="~{fragments/common :: menu('list')}"></div>

    <h1 class="h4 mb-3" th:text="#{results_title}">Results</h1>
    <p class="fw-semibold" th:utext="${poll.text}">Poll question</p>
    <p th:text="${pollSizeMessage}">Poll size</p>

    <div class="table-responsive">
      <table class="table table-striped table-hover align-middle">
        <caption class="visually-hidden" th:text="#{results_summary}">Results summary</caption>
        <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col" th:text="#{results_answers_title}">Answer</th>
          <th scope="col" th:text="#{results_answers_votes}">Votes</th>
          <th scope="col">%</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="row : ${rows}">
          <td th:text="${row.order}">1</td>
          <td th:utext="${row.text}">Option</td>
          <td th:text="${row.votes}">0</td>
          <td th:text="${row.percentageLabel}">0%</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td></td>
          <td><strong th:text="#{results_answers_total}">Total</strong></td>
          <td><strong th:text="${totalVotes}">0</strong></td>
          <td><strong th:text="${totalPercentageLabel}">100%</strong></td>
        </tr>
        </tfoot>
      </table>
    </div>

    <div class="act">
      <input type="button" th:onclick="|location.href='@{/votePolls}'|"
             th:value="#{results_cancel}" value="Back" />
    </div>
  </div>
</body>
</html>
